<template>
  <div class="detail">
    <!-- 导航栏 -->
    <van-nav-bar
      title="百科正文"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 文章 -->
    <div class="content">
      <!-- 文章标题 -->
      <div class="title">{{ detail.title }}</div>

      <!-- 文章备注信息 -->
      <div class="information">
        <!-- 文章作者发布时间 -->
        <div class="other">
          <div class="time">
            2023-2-6
          </div>
          <div class="author">一叶舟</div>
        </div>
        <!-- 文章浏览量 -->
        <div class="views">浏览量 : 28888</div>
      </div>

      <!-- 具体内容 -->
      <div class="article" v-html="detail.article">
      </div>
    </div>

    <!-- 显示全部评论 -->
    <div class="comment">
      <div class="comment_title">
        全部评论
      </div>
      <div class="comment_content">
        <!-- 暂无评论 -->
        <img v-if="list.length == 0" src="@/assets/consult/nodialogue.png" alt="" width="200rem">
        <!-- 评论列表 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="row" v-for="item in list" :key="item.name">
            <div class="photo" :style="{'backgroundImage': `url(${item.photo})`}"></div>
            <div class="info">
              <div class="name"> {{ item.name }} </div>
              <div class="message"> {{ item.message }} </div>
              <div class="time"> {{ item.time }} </div>
            </div>
          </div>
        </van-list>
      </div>
    </div>

    <!-- 评论+点赞收藏等 -->
    <div class="bottom">
      <van-row>
        <!-- 发表评论 -->
        <van-col span="15">
          <van-field @click-right-icon="send()" v-model="text" right-icon="guide-o" clearable placeholder="说说你的看法……"/>
          <!-- <van-icon name="comment-o" /> -->
        </van-col>
        <van-col span="1"></van-col>
        <!-- 显示评论 -->
        <!-- <van-col span="2"><van-icon name="comment-o" /></van-col> -->
        <!-- 点赞 -->
        <van-col span="2" @click="islike = !islike"><van-icon name="good-job-o" :class="{ active: islike }" /></van-col>
        <!-- 收藏 -->
        <van-col span="2" @click="isstar = !isstar"><van-icon name="star-o"  :class="{ active: isstar }"  /></van-col>
        <!-- 分享 -->
        <van-col span="2" @click="showShare = true"><van-icon name="share-o" /></van-col>
      </van-row>

      <!-- 分享面板 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      detail: {},
      text: '',
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '糖友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
          { name: '复制链接', icon: 'link' },
          { name: '二维码', icon: 'qrcode' },
        ]
      ],

      islike: false,
      isstar: true,
      
      list: [
        {
          name: '无名',
          photo: 'static/img/life.3596fe25.jpg',
          message: '说得好',
          time: '2-6 15:12 来自浙江'
        },
        {
          name: 'Sky帆',
          photo: 'static/img/life.3596fe25.jpg',
          message: '学到了学到了',
          time: '2-6 12:10 来自江苏'
        }
      ],
      loading: false,
      finished: false,
    }
  },
  created(){
    this.getContent()
  },
  methods: {
    getContent(){
      // console.log(this.$route.query);
      this.detail = this.$route.query
      // console.log(this.detail);
    },
    onClickLeft() {
      // Toast('返回');
      // this.$router.go(-1)
      this.$router.push({
        path: '/manager/consult',
        query: {
          active: this.detail.active
        }
      })
    },

    // 发送评论
    send(){
      console.log(this.text)
      this.text = ''
    },

    // 显示评论
    onLoad() {
      // 异步更新数据
     // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length != 0) {
          this.finished = true;
        }
    },
    
  }
}
</script>

<style lang="less" scoped>
.active{
  color: red;
}
.detail{
  padding-bottom: 20px;
  .content{
    padding: 1rem;
    padding-top: 0.6rem;
    border-top: 0.2rem solid #f4f4f4;
    border-bottom: 0.4rem solid #f4f4f4;
    margin-bottom: 1rem;
    .title{
      font-size: 1.4rem;
      font-weight: 600;
    }
    .information{
      font-size: 12px;
      color: #969799;
      margin: 0.8rem 0;
      .other{
        // vertical-align: top;
        width: 70%;
        display: inline-block;
      }
      .views{
        vertical-align: top;
        width: 26%;
        // height: 50px;
        display: inline-block;
        text-align: right;
      }
    }
    .article{
      margin: 2rem 0;
      line-height: 1.6rem;
    }
  }
  .comment{
    margin-bottom: 120px;
    padding: 1rem;
    padding-top: 0;
    font-size: 1.2rem;
    .comment_content{
      text-align: center;
      margin-top: 0.5rem;
      img{
        padding-top: 2rem;
        opacity: 0.6;
      }
      .row{
        text-align: left;
        .photo{
          display: inline-block;
          border-radius: 50%;
          width: 60px;
          height: 60px;
          background-size:cover;
          // background-image: url('../../assets/consult/life.jpg');
        }
        .info{
          margin-left: 10px;
          vertical-align: top;
          display: inline-block;
          width: 70%;
          padding-top: 5px;
          border-bottom: 1px solid #f4f4f4;
          div{
            height: 25px;
            line-height: 25px;
          }
          .name{
            color: #585858;
            font-size: 0.8rem;
            // margin: 5px 0;
          }
          .message{
            font-size: 0.9rem;
          }
          .time{
            font-size: 0.7rem;
            color: #969799;
          }
        }
      }
    }
  }
  .bottom{
    background-color: white;
    width: 100%;
    position: fixed;
    bottom: 50px;
    z-index: 2;
    padding: 15px 20px;
    // .van-field__control{
    //   border: 1px solid #f4f4f4;
    //   border-radius: 10px;
    //   padding: 2px 5px;
    // }
    .van-field{
      border: 1px solid #f4f4f4;
      border-radius: 15px;
      padding: 5px 10px;
    }
    .van-col{
      line-height: 35px;
      color: #969799;
    }
  }
}

</style>